<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>day03-小程序基础 | 武汉设计工程学院yyds</title>
    <meta name="generator" content="VuePress 1.9.9">
    <link rel="icon" href="/xcx_dx/favicon.ico">
    <link rel="apple-touch-icon" href="/xcx_dx/apple-touch-icon.png">
    <meta name="description" content="">
    <meta name="referrer" content="no-referrer">
    
    <link rel="preload" href="/xcx_dx/assets/css/0.styles.e1df3f18.css" as="style"><link rel="preload" href="/xcx_dx/assets/js/app.c36966b9.js" as="script"><link rel="preload" href="/xcx_dx/assets/js/2.13776caa.js" as="script"><link rel="preload" href="/xcx_dx/assets/js/11.cead7584.js" as="script"><link rel="prefetch" href="/xcx_dx/assets/js/10.03e33fcc.js"><link rel="prefetch" href="/xcx_dx/assets/js/12.bcd5da7d.js"><link rel="prefetch" href="/xcx_dx/assets/js/13.8aa3d205.js"><link rel="prefetch" href="/xcx_dx/assets/js/14.6565609c.js"><link rel="prefetch" href="/xcx_dx/assets/js/15.1e819a14.js"><link rel="prefetch" href="/xcx_dx/assets/js/16.d240c4eb.js"><link rel="prefetch" href="/xcx_dx/assets/js/17.1054f905.js"><link rel="prefetch" href="/xcx_dx/assets/js/18.7e22f3ac.js"><link rel="prefetch" href="/xcx_dx/assets/js/3.9977063c.js"><link rel="prefetch" href="/xcx_dx/assets/js/4.1f2503c5.js"><link rel="prefetch" href="/xcx_dx/assets/js/5.9aeec249.js"><link rel="prefetch" href="/xcx_dx/assets/js/6.8d7d3795.js"><link rel="prefetch" href="/xcx_dx/assets/js/7.17973866.js"><link rel="prefetch" href="/xcx_dx/assets/js/8.d6f94428.js"><link rel="prefetch" href="/xcx_dx/assets/js/9.ce80b26f.js">
    <link rel="stylesheet" href="/xcx_dx/assets/css/0.styles.e1df3f18.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/xcx_dx/" class="home-link router-link-active"><img src="/xcx_dx/doraameng.jpg" alt="武汉设计工程学院yyds" class="logo"> <span class="site-name can-hide">武汉设计工程学院yyds</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/xcx_dx/xcx/" class="nav-link router-link-active">
  小程序
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序资源网站" class="dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序资源网站" class="mobile-dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          原生小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://mp.weixin.qq.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微信公众平台-登录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://apifox.com/apidoc/shared-8d66c345-7a9a-4844-9a5a-1201852f6faa/doc-1492243" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://vant-contrib.gitee.io/vant-weapp/#/home" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vant Weapp
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  在线思维导图
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://opendocs.alipay.com/mini/introduce" target="_blank" rel="noopener noreferrer" class="nav-link external">
  支付宝小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/guide/introduction" target="_blank" rel="noopener noreferrer" class="nav-link external">
  抖音小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          uni-app小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.showdoc.com.cn/128719739414963/2513235043485226" target="_blank" rel="noopener noreferrer" class="nav-link external">
  接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://uniapp.dcloud.net.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uni-app小程序
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uView
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/xcx_dx/xcx/" class="nav-link router-link-active">
  小程序
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序资源网站" class="dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序资源网站" class="mobile-dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          原生小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://mp.weixin.qq.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微信公众平台-登录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://apifox.com/apidoc/shared-8d66c345-7a9a-4844-9a5a-1201852f6faa/doc-1492243" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://vant-contrib.gitee.io/vant-weapp/#/home" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vant Weapp
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  在线思维导图
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://opendocs.alipay.com/mini/introduce" target="_blank" rel="noopener noreferrer" class="nav-link external">
  支付宝小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/guide/introduction" target="_blank" rel="noopener noreferrer" class="nav-link external">
  抖音小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          uni-app小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.showdoc.com.cn/128719739414963/2513235043485226" target="_blank" rel="noopener noreferrer" class="nav-link external">
  接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://uniapp.dcloud.net.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uni-app小程序
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uView
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/01" class="sidebar-heading clickable"><span>1-小程序基础</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/02" class="sidebar-heading clickable"><span>2-小程序基础</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/03" class="sidebar-heading clickable open active"><span>3-小程序基础</span> <span class="arrow down"></span></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/xcx_dx/xcx/03.html" aria-current="page" class="active sidebar-link">day03-小程序基础</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#_01-自定义组件-基本使用" class="sidebar-link">01.自定义组件—基本使用</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#目标" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#介绍" class="sidebar-link">介绍</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#使用步骤" class="sidebar-link">使用步骤</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#小结" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#_02-自定义组件-组件样式" class="sidebar-link">02.自定义组件—组件样式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#目标-2" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#组件样式隔离" class="sidebar-link">组件样式隔离</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#样式隔离注意点" class="sidebar-link">样式隔离注意点</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#_03-自定义组件-数据、属性和方法" class="sidebar-link">03.自定义组件—数据、属性和方法</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#目标-3" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#思考" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#data数据" class="sidebar-link">data数据</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#methods方法" class="sidebar-link">methods方法</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#properties属性" class="sidebar-link">properties属性</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#参考代码" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#_04-自定义组件-生命周期" class="sidebar-link">04.自定义组件—生命周期</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#目标-4" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#组件生命周期" class="sidebar-link">组件生命周期</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#组件所在页面的生命周期" class="sidebar-link">组件所在页面的生命周期</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#用法" class="sidebar-link">用法</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#_05-自定义组件-组件插槽" class="sidebar-link">05.自定义组件—组件插槽</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#目标-5" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#什么是插槽" class="sidebar-link">什么是插槽</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#单个插槽" class="sidebar-link">单个插槽</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#多插槽-具名插槽" class="sidebar-link">多插槽（具名插槽）</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#_06-自定义组件-父子组件间通讯1" class="sidebar-link">06.自定义组件—父子组件间通讯1</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#目标-6" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#思考-2" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#父子组件间通讯" class="sidebar-link">父子组件间通讯</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#自定义属性" class="sidebar-link">自定义属性</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#自定义事件" class="sidebar-link">自定义事件</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#小结-2" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#_07-自定义组件-父子组件间通讯2" class="sidebar-link">07.自定义组件—父子组件间通讯2</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#目标-7" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#参考代码-2" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#_08-vant组件库-cell单元格" class="sidebar-link">08.Vant组件库—Cell单元格</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#目标-8" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#核心步骤" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#参考代码-3" class="sidebar-link">参考代码</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#小结-3" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#_09-vant组件库-swipecell滑动单元格" class="sidebar-link">09.Vant组件库—SwipeCell滑动单元格</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#目标-9" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#思考-3" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#核心步骤-2" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#参考代码-4" class="sidebar-link">参考代码</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#小结-4" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#_10-vant组件库-样式覆盖" class="sidebar-link">10.Vant组件库—样式覆盖</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#目标-10" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#思考-4" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#样式覆盖" class="sidebar-link">样式覆盖</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#小结-5" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#_11-css变量" class="sidebar-link">11.css变量</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#目标-11" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#思考-5" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#css变量语法" class="sidebar-link">css变量语法</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#小结-6" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#_12-vant组件库-样式覆盖-css变量" class="sidebar-link">12.Vant组件库—样式覆盖—css变量</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#目标-12" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#思考-6" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#参考代码-5" class="sidebar-link">参考代码</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#小结-7" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#_13-分包-基本配置" class="sidebar-link">13.分包—基本配置</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#目标-13" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#思考-7" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#分包" class="sidebar-link">分包</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#配置参考代码" class="sidebar-link">配置参考代码</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#小结-8" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#_14-分包-预加载" class="sidebar-link">14.分包—预加载</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#目标-14" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#分包预加载" class="sidebar-link">分包预加载</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#小结-9" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#_15-框架接口-getapp" class="sidebar-link">15.框架接口—getApp()</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#目标-15" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#思考-8" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#getapp" class="sidebar-link">getApp</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#参考代码-6" class="sidebar-link">参考代码</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#小结-10" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#_16-框架接口-getcurrentpages" class="sidebar-link">16.框架接口—getCurrentPages</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#目标-16" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#思考-9" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#getcurrentpages" class="sidebar-link">getCurrentPages</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#小结-11" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#_17-框架接口-behavior" class="sidebar-link">17.框架接口—Behavior</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#目标-17" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#behavior" class="sidebar-link">Behavior</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#参考代码-7" class="sidebar-link">参考代码</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#小结-12" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#_18-用户信息-获取用户头像" class="sidebar-link">18.用户信息—获取用户头像</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#目标-18" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#核心步骤-3" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#参考代码-8" class="sidebar-link">参考代码</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#练习" class="sidebar-link">练习</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#_19-用户信息-获取用户昵称" class="sidebar-link">19.用户信息—获取用户昵称</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#目标-19" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#核心步骤-4" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#参考代码-9" class="sidebar-link">参考代码</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#练习-2" class="sidebar-link">练习</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/03.html#作业" class="sidebar-link">作业</a></li></ul></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/04" class="sidebar-heading clickable"><span>4-享+本地生活</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/05" class="sidebar-heading clickable"><span>5-享+本地生活</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/06" class="sidebar-heading clickable"><span>6-享+本地生活</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/07" class="sidebar-heading clickable"><span>7-享+本地生活</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/08" class="sidebar-heading clickable"><span>8-uni-app项目</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/09" class="sidebar-heading clickable"><span>9-uni-app项目</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/10" class="sidebar-heading clickable"><span>10-uni-app项目</span> <span class="arrow right"></span></a> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="day03-小程序基础"><a href="#day03-小程序基础" class="header-anchor">#</a> day03-小程序基础</h1> <h2 id="_01-自定义组件-基本使用"><a href="#_01-自定义组件-基本使用" class="header-anchor">#</a> 01.自定义组件—基本使用</h2> <h3 id="目标"><a href="#目标" class="header-anchor">#</a> 目标</h3> <p>掌握自定义组件的基本用法</p> <h3 id="介绍"><a href="#介绍" class="header-anchor">#</a> 介绍</h3> <ul><li>自定义组件可理解为允许我们创造自己想要的某些效果的标签。如image是小程序指定的图片标签， border-image 可以是我们自己创造的标签</li> <li>自定义组件还具有简化页面结构、封装复用代码的功能。</li> <li>组件化开发是目前前端开发项目的主流方式。</li></ul> <h3 id="使用步骤"><a href="#使用步骤" class="header-anchor">#</a> 使用步骤</h3> <ol><li>创建</li></ol> <p>通常习惯将组件放到独立的目录 components 当中，这个目录需要我们手动进行创建。<br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1677137126471-f132ee50-c5d2-4faa-882a-0e786758b92c.png#averageHue=%232f5783&amp;clientId=u930b6b6b-ce98-4&amp;from=paste&amp;height=270&amp;id=u78df4e69&amp;name=image.png&amp;originHeight=540&amp;originWidth=682&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=152429&amp;status=done&amp;style=none&amp;taskId=u4312a9a0-f02e-4fae-a3ec-595c5360524&amp;title=&amp;width=341" alt="image.png"><br>组件和页面的结构是一致的，但也是有区别的：</p> <ul><li>组件的配置文件中配置项 component: true</li> <li>组件的 .js 文件中调用 Component 函数，页面的.js文件中调用Page函数</li></ul> <ol start="2"><li>注册
<ul><li>页面注册是在使用组件的页面配置中通过 usingComponents 进行注册，只能在当前页面中使用该组件</li> <li>全局注册是在 app.json 文件中通过 usingComponents 对自定义组件进行注册，注册的组件可以任意页面中使用全局注册的组件</li></ul></li></ol> <div class="language-json extra-class"><pre class="language-json"><code><span class="token property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;my-test&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/components/MyTest/index&quot;</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="3"><li>使用</li></ol> <my-test></my-test> <h3 id="小结"><a href="#小结" class="header-anchor">#</a> 小结</h3> <p>使用自定义组件的步骤？</p> <ol><li>创建</li> <li>注册</li> <li>使用</li></ol> <h2 id="_02-自定义组件-组件样式"><a href="#_02-自定义组件-组件样式" class="header-anchor">#</a> 02.自定义组件—组件样式</h2> <h3 id="目标-2"><a href="#目标-2" class="header-anchor">#</a> 目标</h3> <p>掌握组件样式的编写注意点及组件样式隔离解决方案。</p> <h3 id="组件样式隔离"><a href="#组件样式隔离" class="header-anchor">#</a> 组件样式隔离</h3> <p>默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响。<br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1677135930061-f789e1d4-7902-447f-bb1d-1727f9bd3750.png#averageHue=%231e1e1e&amp;clientId=u930b6b6b-ce98-4&amp;from=paste&amp;height=369&amp;id=u0eefe357&amp;name=image.png&amp;originHeight=738&amp;originWidth=546&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=20296&amp;status=done&amp;style=none&amp;taskId=u9fd0be51-af26-4048-9c7e-ebf5fc4dbf3&amp;title=&amp;width=273" alt="image.png"></p> <ul><li>组件A的样式不会影响组件B的样式</li> <li>组件A的样式不会影响页面的样式</li> <li>页面的样式不会影响组件A和B的样式</li></ul> <h3 id="样式隔离注意点"><a href="#样式隔离注意点" class="header-anchor">#</a> 样式隔离注意点</h3> <ul><li>app.wxss中的全局样式对组件无效</li> <li>只有class选择器具有样式隔离效果，id选择器、属性选择器、标签选择器不受样式隔离的影响
:::success
建议：在组件和引用组件的页面中建议使用class选择器，不要使用id、属性、标签选择器
:::</li></ul> <h4 id="修改组件样式的隔离选项"><a href="#修改组件样式的隔离选项" class="header-anchor">#</a> 修改组件样式的隔离选项</h4> <p>可以同一些属性配置去修改组件的隔离选项，但是一般开发业务组件用不上，需要的时候去查文档
<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html" target="_blank" rel="noopener noreferrer">样式隔离文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="_03-自定义组件-数据、属性和方法"><a href="#_03-自定义组件-数据、属性和方法" class="header-anchor">#</a> 03.自定义组件—数据、属性和方法</h2> <h3 id="目标-3"><a href="#目标-3" class="header-anchor">#</a> 目标</h3> <p>能熟练使用自定义数据、属性和方法丰富自定义组件。</p> <h3 id="思考"><a href="#思考" class="header-anchor">#</a> 思考</h3> <p>假设自定义组件内容如下，现在希望点击+1按钮，数字能自加1，点击-1按钮，数字能自减1，并且能通过自定义属性max、min控制数字的最大值和最小值，应如何实现？<br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1677138670996-d9aa3633-eafe-47f6-85d1-b597a4fd8143.png#averageHue=%23fef4f4&amp;clientId=u930b6b6b-ce98-4&amp;from=paste&amp;height=63&amp;id=u4a306519&amp;name=image.png&amp;originHeight=126&amp;originWidth=638&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=13598&amp;status=done&amp;style=none&amp;taskId=u0c0e0c9a-128a-42bb-b37d-175435c7c07&amp;title=&amp;width=319" alt="image.png"></p> <h3 id="data数据"><a href="#data数据" class="header-anchor">#</a> data数据</h3> <p>在小程序中，用于<strong>组件模板渲染的私有数据，<strong>需要定义到</strong>data</strong>中，示例如下：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
	<span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  	<span class="token literal-property property">num</span><span class="token operator">:</span> <span class="token number">1</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="methods方法"><a href="#methods方法" class="header-anchor">#</a> methods方法</h3> <p>在小程序中，<strong>事件处理函数和自定义方法</strong>需要定义到<strong>methods</strong>中，示例如下：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
	<span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  	<span class="token function">handleAdd</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      	<span class="token literal-property property">num</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>num <span class="token operator">+</span> <span class="token number">1</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">handleSub</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      	<span class="token literal-property property">num</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>num <span class="token operator">-</span> <span class="token number">1</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="properties属性"><a href="#properties属性" class="header-anchor">#</a> properties属性</h3> <p>在小程序中，properties是组件的对外属性，<strong>用于接收外界传递到组件中的数据</strong>，示例如下：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
	<span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  	<span class="token literal-property property">min</span><span class="token operator">:</span> Number<span class="token punctuation">,</span>
    <span class="token literal-property property">max</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    	<span class="token literal-property property">type</span><span class="token operator">:</span> Number<span class="token punctuation">,</span>
      <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">10</span> <span class="token comment">// value用于指定默认值</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="参考代码"><a href="#参考代码" class="header-anchor">#</a> 参考代码</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>red-text<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>components/MyTest/index.wxml<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>wrap<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span> display: flex;align-items: center;<span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleAdd<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>+1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>num<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    {{num}}
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleSub<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>-1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// components/MyTest/index.js</span>
<span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">/**
   * 组件的属性列表
   */</span>
  <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">max</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">type</span><span class="token operator">:</span> Number<span class="token punctuation">,</span>
      <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">min</span><span class="token operator">:</span> Number<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token comment">/**
   * 组件的初始数据
   */</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">num</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token comment">/**
   * 组件的方法列表
   */</span>
  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">handleAdd</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>num <span class="token operator">&lt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>properties<span class="token punctuation">.</span>max<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          <span class="token literal-property property">num</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>num <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">handleSub</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>num <span class="token operator">&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>properties<span class="token punctuation">.</span>min<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          <span class="token literal-property property">num</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>num <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">&lt;</span>my<span class="token operator">-</span>test max<span class="token operator">=</span><span class="token string">&quot;9&quot;</span> min<span class="token operator">=</span><span class="token string">&quot;1&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
</code></pre></div><p>查看或调试传入组件的数据的查看方式如下图所示：<br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1677139886751-1f049047-f4c0-401c-96d5-175a75d933db.png#averageHue=%232a2b2a&amp;clientId=u930b6b6b-ce98-4&amp;from=paste&amp;height=195&amp;id=uab8f71fc&amp;name=image.png&amp;originHeight=390&amp;originWidth=1368&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=121827&amp;status=done&amp;style=none&amp;taskId=u904e1817-d0bb-4fb5-b869-7f416ad4322&amp;title=&amp;width=684" alt="image.png">
:::success
提示：其实，小程序组件中data和properties是完全相等的，可通过如下代码验证<br>console.log(this.data);<br>console.log(this.properties);<br>console.log(this.data === this.properties)<br>可以通过this.setData更改properties里的值 ，如this.setData({max: this.properties.max + 1})
:::</p> <h2 id="_04-自定义组件-生命周期"><a href="#_04-自定义组件-生命周期" class="header-anchor">#</a> 04.自定义组件—生命周期</h2> <h3 id="目标-4"><a href="#目标-4" class="header-anchor">#</a> 目标</h3> <p>掌握自定义组件生命周期。</p> <h3 id="组件生命周期"><a href="#组件生命周期" class="header-anchor">#</a> 组件生命周期</h3> <p>组件的生命周期，是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。</p> <table><thead><tr><th><strong>生命周期</strong></th> <th><strong>参数</strong></th> <th><strong>描述</strong></th></tr></thead> <tbody><tr><td><strong>created</strong></td> <td><strong>无</strong></td> <td><strong>在组件实例刚刚被创建时执行，此时还不能调用 setData，一般用于给组件的this添加一些自定义的属性字段</strong></td></tr> <tr><td><strong>attached</strong></td> <td><strong>无</strong></td> <td><strong>在组件实例进入页面节点树时执行，绝大多数初始化工作可以在这个时机进行，例如发请求获取初始数据</strong></td></tr> <tr><td>ready</td> <td>无</td> <td>在组件在视图层布局完成后执行</td></tr> <tr><td>moved</td> <td>无</td> <td>在组件实例被移动到节点树另一个位置时执行</td></tr> <tr><td><strong>detached</strong></td> <td><strong>无</strong></td> <td><strong>在组件实例被从页面节点树移除时执行，适合做一些清理工作</strong></td></tr> <tr><td>error</td> <td>Object Error</td> <td>每当组件方法抛出错误时执行</td></tr></tbody></table> <h3 id="组件所在页面的生命周期"><a href="#组件所在页面的生命周期" class="header-anchor">#</a> 组件所在页面的生命周期</h3> <p>有时，自定义组件的行为<strong>依赖于页面状态的变化</strong>，此时就需要用到<strong>组件所在页面的生命周期</strong>。既在组件中监听页面的生命周期的变化。可以监听到的页面生命周期有以下三个：</p> <table><thead><tr><th><strong>生命周期</strong></th> <th><strong>参数</strong></th> <th><strong>描述</strong></th></tr></thead> <tbody><tr><td>show</td> <td>无</td> <td>组件所在的页面被展示时执行</td></tr> <tr><td>hide</td> <td>无</td> <td>组件所在的页面被隐藏时执行</td></tr> <tr><td>resize</td> <td>Object Size</td> <td>组件所在的页面尺寸变化时执行</td></tr></tbody></table> <h3 id="用法"><a href="#用法" class="header-anchor">#</a> 用法</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// 推荐方式</span>
  <span class="token literal-property property">lifetimes</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">attached</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 在组件实例进入页面节点树时执行</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">detached</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 在组件实例被从页面节点树移除时执行</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 以下是旧式的定义方式，可以保持对 &lt;2.2.3 版本基础库的兼容</span>
  <span class="token function-variable function">attached</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 在组件实例进入页面节点树时执行</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function-variable function">detached</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 在组件实例被从页面节点树移除时执行</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 页面生命周期</span>
  <span class="token literal-property property">pageLifetimes</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">show</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 页面被展示</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">hide</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 页面被隐藏</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">resize</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">size</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 页面尺寸变化</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="_05-自定义组件-组件插槽"><a href="#_05-自定义组件-组件插槽" class="header-anchor">#</a> 05.自定义组件—组件插槽</h2> <h3 id="目标-5"><a href="#目标-5" class="header-anchor">#</a> 目标</h3> <p>掌握自定义组件中插槽的使用方式</p> <h3 id="什么是插槽"><a href="#什么是插槽" class="header-anchor">#</a> 什么是插槽</h3> <p>在自定义组件的wxml结构中，我们可以提供一个<code>&lt;slot&gt;</code>节点，用于承载组件使用者提供的wxml结构。插槽可以方便开发者将不确定的、或者希望由用户去确定的交给用户。如自己封装的弹框组件底部不确定用户会放一个按钮还是两个按钮，就可以放过插槽，交给用户自己定。</p> <h3 id="单个插槽"><a href="#单个插槽" class="header-anchor">#</a> 单个插槽</h3> <p>在小程序中，默认每个自定义组件中只允许使用一个<code>&lt;slot&gt;</code>进行占位。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--components/MyTest2/index.wxml--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span><span class="token punctuation">&gt;</span></span>components/MyTest2/index.wxml<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- 对于不确定的内容，可以使用slot进行占位，具体内容交给使用者确定 --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-test2</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- 这里的内容将被放到组件中&lt;slot&gt;的位置 --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
    这里是slot里的内容
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-test2</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="多插槽-具名插槽"><a href="#多插槽-具名插槽" class="header-anchor">#</a> 多插槽（具名插槽）</h3> <p>默认情况下，一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时，可以在组件 js 中声明启用。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">multipleSlots</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 在组件定义时的选项中启用多 slot 支持</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">/* ... */</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">/* ... */</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>此时，可以在这个组件的 wxml 中使用多个 slot ，以不同的 name 来区分。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span><span class="token punctuation">&gt;</span></span>components/MyTest2/index.wxml<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- 对于不确定的内容，可以使用slot进行占位，具体内容交给使用者确定 --&gt;</span>
  <span class="token comment">&lt;!-- &lt;slot&gt;&lt;/slot&gt; --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>before<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
    ---------这里是分割线--------
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>after<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-test2</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- 这里的内容将被放到组件中&lt;slot&gt;的位置 --&gt;</span>
  <span class="token comment">&lt;!-- &lt;view&gt;
    这里是slot里的内容
  &lt;/view&gt; --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>before<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    这里是before slot里的内容
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>after<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    这里是after slot里的内容
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-test2</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="_06-自定义组件-父子组件间通讯1"><a href="#_06-自定义组件-父子组件间通讯1" class="header-anchor">#</a> 06.自定义组件—父子组件间通讯1</h2> <h3 id="目标-6"><a href="#目标-6" class="header-anchor">#</a> 目标</h3> <p>掌握小程序组件通讯方式</p> <h3 id="思考-2"><a href="#思考-2" class="header-anchor">#</a> 思考</h3> <p>如图，页面Page里有数据num，要求将num传递给页面上的组件，并在组件中显示。组件里面有+1按钮，点击时需将num自增1，并且页面Page里的data里的num也需要跟着改变，如何实现？<br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1677144997035-abf24b56-6187-4ad1-98f8-8b80f640a2e4.png#averageHue=%23efefef&amp;clientId=u930b6b6b-ce98-4&amp;from=paste&amp;height=107&amp;id=ue5510b84&amp;name=image.png&amp;originHeight=214&amp;originWidth=636&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=38339&amp;status=done&amp;style=none&amp;taskId=u095a1d25-8eef-4c24-a3a3-0c817a4dc12&amp;title=&amp;width=318" alt="image.png"></p> <h3 id="父子组件间通讯"><a href="#父子组件间通讯" class="header-anchor">#</a> 父子组件间通讯</h3> <p>父子组件间的基本通信方式有以下3种。</p> <ol><li>自定义属性。
<ul><li>用于父组件向子组件传递数据，只能传递JSON兼容的数据</li></ul></li> <li>自定义事件
<ul><li>用于子组件向父组件传递数据，可以传递任意数据</li></ul></li> <li>获取组件实例
<ul><li>父组件可以通过this.selectComponent()获取子组件实例对象</li> <li>这样可以直接访问子组件的任意数据和方法</li></ul></li></ol> <h3 id="自定义属性"><a href="#自定义属性" class="header-anchor">#</a> 自定义属性</h3> <p><strong>核心步骤</strong></p> <ol><li>子组件通过定义自定义属性接收</li> <li>父组件通过自定义属性传递</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">num</span><span class="token operator">:</span> Number<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span><span class="token punctuation">&gt;</span></span>components/MyTest3/index.wxml<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
  子组件内num的值为：{{num}}
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>点我+1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-test3</span> <span class="token attr-name">num</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{num}}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
父组件（页面中）num的值为{{num}}
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">num</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="自定义事件"><a href="#自定义事件" class="header-anchor">#</a> 自定义事件</h3> <p><strong>核心步骤</strong></p> <ol><li>给子组件上某个元素绑定事件</li> <li>在事件回调中通过triggerEvent触发自定义事件并传参</li> <li>父组件监听自定义事件</li> <li>在回调函数中通过事件对象的detail属性接参</li></ol> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span><span class="token punctuation">&gt;</span></span>components/MyTest3/index.wxml<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
  子组件内num的值为：{{num}}
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleAdd<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>点我+1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// components/MyTest3/index.js</span>
<span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">num</span><span class="token operator">:</span> Number<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">handleAdd</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token literal-property property">num</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>properties<span class="token punctuation">.</span>num <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token comment">// 触发自定义事件并传参</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">triggerEvent</span><span class="token punctuation">(</span><span class="token string">&quot;add&quot;</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>properties<span class="token punctuation">.</span>num<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-test3</span> <span class="token attr-name">num</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{num}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>add</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>add<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
父组件（页面中）num的值为{{num}}
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">num</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// console.log(ev);</span>
    <span class="token keyword">const</span> value <span class="token operator">=</span> ev<span class="token punctuation">.</span>detail<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">num</span><span class="token operator">:</span> value<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="小结-2"><a href="#小结-2" class="header-anchor">#</a> 小结</h3> <p>父子组件通讯的方式有？父传子：自定义属性<br>子传父：自定义事件triggerEvent<br>this.selectComponent</p> <h2 id="_07-自定义组件-父子组件间通讯2"><a href="#_07-自定义组件-父子组件间通讯2" class="header-anchor">#</a> 07.自定义组件—父子组件间通讯2</h2> <h3 id="目标-7"><a href="#目标-7" class="header-anchor">#</a> 目标</h3> <p>掌握this.selectComponent方式实现父子组件通讯</p> <h3 id="参考代码-2"><a href="#参考代码-2" class="header-anchor">#</a> 参考代码</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-test3</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>test3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">num</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{num}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>add</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>add<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
父组件（页面中）num的值为{{num}}
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getChild<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>获取子组件实例<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">num</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// console.log(ev);</span>
    <span class="token keyword">const</span> value <span class="token operator">=</span> ev<span class="token punctuation">.</span>detail<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">num</span><span class="token operator">:</span> value<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">getChild</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> child <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">selectComponent</span><span class="token punctuation">(</span><span class="token string">&quot;.test3&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>child<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 获取子组件里的数据</span>
    <span class="token keyword">const</span> num <span class="token operator">=</span> child<span class="token punctuation">.</span>properties<span class="token punctuation">.</span>num<span class="token punctuation">;</span>
    <span class="token comment">// 调用子组件里的方法</span>
    child<span class="token punctuation">.</span><span class="token function">handleAdd</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="_08-vant组件库-cell单元格"><a href="#_08-vant组件库-cell单元格" class="header-anchor">#</a> 08.Vant组件库—Cell单元格</h2> <h3 id="目标-8"><a href="#目标-8" class="header-anchor">#</a> 目标</h3> <p>掌握vant组件库中组件使用。</p> <h3 id="核心步骤"><a href="#核心步骤" class="header-anchor">#</a> 核心步骤</h3> <ol><li>安装Vant组件库</li> <li>去掉app.json中的&quot;style&quot;: &quot;v2&quot;</li> <li>构建npm。开发者工具上 &gt; &quot;工具&quot; &gt; &quot;构建npm&quot;</li> <li>去app.json或页面json中注册
:::success
官方文档：<a href="https://vant-contrib.gitee.io/vant-weapp/#/quickstart" target="_blank" rel="noopener noreferrer">https://vant-contrib.gitee.io/vant-weapp/#/quickstart<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
:::</li></ol> <h3 id="参考代码-3"><a href="#参考代码-3" class="header-anchor">#</a> 参考代码</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell-group</span> <span class="token attr-name">inset</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>large<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>北京富力家园<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>审核通过<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>房间号<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1号楼1单元101室<span class="token punctuation">&quot;</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ false }}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>业主<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>续集号<span class="token punctuation">&quot;</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ false }}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell-group</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-json extra-class"><pre class="language-json"><code><span class="token property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;van-cell&quot;</span><span class="token operator">:</span> <span class="token string">&quot;@vant/weapp/cell/index&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;van-cell-group&quot;</span><span class="token operator">:</span> <span class="token string">&quot;@vant/weapp/cell-group/index&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><h3 id="小结-3"><a href="#小结-3" class="header-anchor">#</a> 小结</h3> <p>对于组件库里的组件，一定要做到看到设计图就知道每个部分应该要用哪些组件来完成，组件详细的细节可以通过查阅文档，但是组件长啥样，能完成哪些功能一定要心理有底。</p> <h2 id="_09-vant组件库-swipecell滑动单元格"><a href="#_09-vant组件库-swipecell滑动单元格" class="header-anchor">#</a> 09.Vant组件库—SwipeCell滑动单元格</h2> <h3 id="目标-9"><a href="#目标-9" class="header-anchor">#</a> 目标</h3> <p>掌握vant组件库中SwipeCell组件的使用。</p> <h3 id="思考-3"><a href="#思考-3" class="header-anchor">#</a> 思考</h3> <p>如何实现如下效果，让单元格可以左滑删除？<br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675998775236-bac11a92-acaf-4e98-bf48-0d1952aa8cf9.png#averageHue=%23fae7d7&amp;clientId=u23029a26-f898-4&amp;from=paste&amp;height=272&amp;id=u4f3d0540&amp;name=image.png&amp;originHeight=544&amp;originWidth=786&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=136138&amp;status=done&amp;style=none&amp;taskId=uf954e3f7-9ba7-4550-bfad-4a76e54fe58&amp;title=&amp;width=393" alt="image.png"></p> <h3 id="核心步骤-2"><a href="#核心步骤-2" class="header-anchor">#</a> 核心步骤</h3> <ol><li>app.json里或页面json里注册组件。</li> <li>使用组件</li></ol> <h3 id="参考代码-4"><a href="#参考代码-4" class="header-anchor">#</a> 参考代码</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-swipe-cell</span> <span class="token attr-name">right-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ 65 }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell-group</span> <span class="token attr-name">inset</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>北京富力家园<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>审核通过<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>房间号<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1号楼1单元101室<span class="token punctuation">&quot;</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ false }}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>业主<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>续集号<span class="token punctuation">&quot;</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ false }}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell-group</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>删除<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-swipe-cell</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-json extra-class"><pre class="language-json"><code><span class="token property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;van-cell&quot;</span><span class="token operator">:</span> <span class="token string">&quot;@vant/weapp/cell/index&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;van-cell-group&quot;</span><span class="token operator">:</span> <span class="token string">&quot;@vant/weapp/cell-group/index&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;van-swipe-cell&quot;</span><span class="token operator">:</span> <span class="token string">&quot;@vant/weapp/swipe-cell/index&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><h3 id="小结-4"><a href="#小结-4" class="header-anchor">#</a> 小结</h3> <p>要清楚知道每个组件的用途，实际使用时可以查阅文档，修改示例代码，确定每个属性的作用。</p> <h2 id="_10-vant组件库-样式覆盖"><a href="#_10-vant组件库-样式覆盖" class="header-anchor">#</a> 10.Vant组件库—样式覆盖</h2> <h3 id="目标-10"><a href="#目标-10" class="header-anchor">#</a> 目标</h3> <p>掌握重写覆盖第三方组件库样式的方式。</p> <h3 id="思考-4"><a href="#思考-4" class="header-anchor">#</a> 思考</h3> <p>如何给左边的删除按钮加上样式让其变成跟设计图一样<br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675999126838-19050be3-dcd2-4ad8-8270-a7a50b339805.png#averageHue=%23f9faf8&amp;clientId=u23029a26-f898-4&amp;from=paste&amp;height=146&amp;id=ubd0ce886&amp;name=image.png&amp;originHeight=292&amp;originWidth=1410&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=259698&amp;status=done&amp;style=none&amp;taskId=uefb0646c-dcba-4623-bd17-511cccfed8f&amp;title=&amp;width=705" alt="image.png"></p> <h3 id="样式覆盖"><a href="#样式覆盖" class="header-anchor">#</a> 样式覆盖</h3> <p>Vant 组件中的组件提供了非常整齐美观的样式，但是开发中在所难免需要对原有样式进行个修改，官方介绍了3种方式来覆盖原来的样式：</p> <ol><li>简单粗暴型。通过调试工具查找要修改样式的盒子，找到已定义的类名，然后强制覆盖原有的样式</li></ol> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.van-swipe-cell__right</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 65px<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>:::success
这种方式能生效，还需要组件的options里面设置了styleIsolation为apply-shared或shared，或者设置了addGlobalClass: true。Vant的所有组件都设置了addGlobalClass: true。
:::</p> <ol start="2"><li>通过外部样式类。Vant 大部分组件都支持 custom-class 来指定一个类名，通过这个类名来修改组件根节点的样式。</li></ol> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.my-swipe-cell</span> <span class="token punctuation">{</span>
  <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 20rpx<span class="token punctuation">;</span>
  <span class="token property">margin-right</span><span class="token punctuation">:</span> 30rpx<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.my-cell-group</span> <span class="token punctuation">{</span>
  <span class="token property">margin-right</span><span class="token punctuation">:</span> 0 <span class="token important">!important</span><span class="token punctuation">;</span> // 通过<span class="token important">!important</span>增加优先级
<span class="token punctuation">}</span>
</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-swipe-cell</span> <span class="token attr-name">custom-class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>my-swipe-cell<span class="token punctuation">&quot;</span></span> <span class="token attr-name">right-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ 65 }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell-group</span> <span class="token attr-name">custom-class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>my-cell-group<span class="token punctuation">&quot;</span></span> <span class="token attr-name">inset</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>北京富力家园<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>审核通过<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>房间号<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1号楼1单元101室<span class="token punctuation">&quot;</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ false }}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>业主<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>续集号<span class="token punctuation">&quot;</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ false }}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell-group</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>删除<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-swipe-cell</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>:::success
提示：在进行样式覆盖时优先不够的情况下使用 !important
:::</p> <ol start="3"><li>使用样式变量（下节介绍）</li></ol> <h3 id="小结-5"><a href="#小结-5" class="header-anchor">#</a> 小结</h3> <ol><li>样式覆盖采用简单粗暴型的关键在于找到组件编译之后的盒子，找出对应的css选择器去添加额外的样式进行覆盖。</li> <li>外部样式类的关键在于知道占位的外部类属性（如custom-class)，还需要注意处理css优先级问题。</li></ol> <h2 id="_11-css变量"><a href="#_11-css变量" class="header-anchor">#</a> 11.css变量</h2> <h3 id="目标-11"><a href="#目标-11" class="header-anchor">#</a> 目标</h3> <p>掌握css变量。</p> <h3 id="思考-5"><a href="#思考-5" class="header-anchor">#</a> 思考</h3> <p>在审查vant组件元素的样式时，margin: var(--cell-group-inset-padding, 0 16px)是做什么的？<br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1676010603836-79760d9d-d5b4-4628-b9e1-d878cec80940.png#averageHue=%23d97e42&amp;clientId=u23029a26-f898-4&amp;from=paste&amp;height=92&amp;id=uee4bc7c9&amp;name=image.png&amp;originHeight=184&amp;originWidth=1456&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=80241&amp;status=done&amp;style=none&amp;taskId=u8d087bfe-f09b-4b02-b6c8-48c0a857e50&amp;title=&amp;width=728" alt="image.png"></p> <h3 id="css变量语法"><a href="#css变量语法" class="header-anchor">#</a> css变量语法</h3> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box</span> <span class="token punctuation">{</span>
	<span class="token property">--my-custom-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span> // 变量声明
  <span class="token property">backgound-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--my-custom-color<span class="token punctuation">)</span><span class="token punctuation">;</span> //变量使用
<span class="token punctuation">}</span>
</code></pre></div><p><strong>变量声明</strong><br>变量名前面要加<strong>两根连词线–</strong>，变量名大小写敏感</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box</span><span class="token punctuation">{</span>
	<span class="token property">--main-color</span><span class="token punctuation">:</span> #4d4e53<span class="token punctuation">;</span>
  <span class="token property">--main-bg</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">--logo-border-color</span><span class="token punctuation">:</span> rebeccapurple<span class="token punctuation">;</span>
  <span class="token property">--header-height</span><span class="token punctuation">:</span> 68px<span class="token punctuation">;</span>
  <span class="token property">--content-padding</span><span class="token punctuation">:</span> 10px 20px<span class="token punctuation">;</span>
  <span class="token property">--base-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--main-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>var函数</strong><br>var()函数用于<strong>读取变量</strong>，可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--main-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--header-height<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.box</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--main-color1<span class="token punctuation">,</span> #000<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--header-height<span class="token punctuation">,</span> 80px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>变量作用域</strong><br>上述代码中定义的变量只能用在** .box 盒子及后代元素**上，如果希望整个页面都能使用这个变量，可以这样定义：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">page</span> <span class="token punctuation">{</span> // 小程序上， 小程序上page是页面根元素，所以放到page下，所有其它元素都可以使用
  <span class="token property">--my-custom-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>:::success
web开发时，可以放到:root下，如:root{ --my-custom-color: pink;}，则其它元素上都可以使用。
:::</p> <h3 id="小结-6"><a href="#小结-6" class="header-anchor">#</a> 小结</h3> <ol><li>css变量定义通过--变量名。</li> <li>通过var(变量名)去使用，var函数还可以传入第二个参数表示默认值。</li> <li>变量的作用域是定义的盒子及其后代元素。</li></ol> <h2 id="_12-vant组件库-样式覆盖-css变量"><a href="#_12-vant组件库-样式覆盖-css变量" class="header-anchor">#</a> 12.Vant组件库—样式覆盖—css变量</h2> <h3 id="目标-12"><a href="#目标-12" class="header-anchor">#</a> 目标</h3> <p>掌握组件库css变量设置。</p> <h3 id="思考-6"><a href="#思考-6" class="header-anchor">#</a> 思考</h3> <p>了解了 css 变量的基本用法后，咱们如何修改 vant 中 css 变量将单元格中文字的样式改成UI图一样？<br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1676012955686-ae6698ac-a06f-485e-be44-b625f7d24d59.png#averageHue=%23f8f9f8&amp;clientId=u23029a26-f898-4&amp;from=paste&amp;height=124&amp;id=uafc65070&amp;name=image.png&amp;originHeight=248&amp;originWidth=1248&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=95204&amp;status=done&amp;style=none&amp;taskId=u4cf05d2f-6e46-4db2-bfdd-c9896147537&amp;title=&amp;width=624" alt="image.png"></p> <h3 id="参考代码-5"><a href="#参考代码-5" class="header-anchor">#</a> 参考代码</h3> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">page</span> <span class="token punctuation">{</span>
  <span class="token property">--cell-large-title-font-size</span><span class="token punctuation">:</span> 30rpx<span class="token punctuation">;</span>
  <span class="token property">--cell-text-color</span><span class="token punctuation">:</span> #c3c3c5<span class="token punctuation">;</span>
  <span class="token property">--cell-value-color</span><span class="token punctuation">:</span> #686868<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="小结-7"><a href="#小结-7" class="header-anchor">#</a> 小结</h3> <p>若想定义的css变量全局可用，可将其放置在page选择器下，并将其放置app.wxss文件中。</p> <h2 id="_13-分包-基本配置"><a href="#_13-分包-基本配置" class="header-anchor">#</a> 13.分包—<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html" target="_blank" rel="noopener noreferrer">基本配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></h2> <h3 id="目标-13"><a href="#目标-13" class="header-anchor">#</a> 目标</h3> <p>掌握分包的基本配置。</p> <h3 id="思考-7"><a href="#思考-7" class="header-anchor">#</a> 思考</h3> <p>我们知道小程序限制每个包代码量不超过2M，如果我们的小程序确实很复杂，代码量操过2M，应该如何解决呢？</p> <h3 id="分包"><a href="#分包" class="header-anchor">#</a> 分包</h3> <p><strong>定义：</strong><br>将小程序拆分成若干个部分叫做分包。<br><strong>作用：</strong></p> <ol><li>解决项目体积过大</li> <li>提高启动效率</li> <li>方便协同开发</li></ol> <p><strong>分类：</strong></p> <ol><li>主包：
<ul><li>每个小程序必定含有一个<strong>主包</strong>。</li> <li>默认启动页面、TabBar 页面，以及公共资源/JS 脚本必须放在主包；</li></ul></li> <li>普通分包
<ul><li>普通非独立分包。
<ul><li>进入普通非独立分包时，主包会被下载</li> <li>可以使用主包里面的公共资源/JS脚本</li></ul></li> <li>独立分包
<ul><li>一种特殊类型的分包，可以独立于主包和其他分包运行。</li> <li>从独立分包中页面进入小程序时，不需要下载主包。不可使用主包里的资源。</li></ul></li></ul></li></ol> <h3 id="配置参考代码"><a href="#配置参考代码" class="header-anchor">#</a> 配置参考代码</h3> <div class="language-json extra-class"><pre class="language-json"><code><span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 和pages同级</span>
<span class="token property">&quot;subPackages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token property">&quot;root&quot;</span><span class="token operator">:</span> <span class="token string">&quot;goods_pkg&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token string">&quot;pages/goods_list/index&quot;</span><span class="token punctuation">,</span> 
        <span class="token string">&quot;pages/goods_detail/index&quot;</span>
      <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">]</span>

页面跳转
&lt;navigator url=<span class="token string">&quot;/goods_pkg/pages/goods_list/index&quot;</span>&gt;分包<span class="token number">1</span>&lt;/navigator&gt;
&lt;navigator url=<span class="token string">&quot;/goods_pkg/pages/goods_detail/index&quot;</span>&gt;分包detail&lt;/navigator&gt;
</code></pre></div><p><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1676016130823-8a6dfb5f-bbcd-4b29-bf0f-b4ce3580e5c9.png#averageHue=%23383736&amp;clientId=u23029a26-f898-4&amp;from=paste&amp;height=298&amp;id=u31bcb938&amp;name=image.png&amp;originHeight=596&amp;originWidth=1320&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=125182&amp;status=done&amp;style=none&amp;taskId=u79ee4d0f-7223-4545-9d5f-67ef985d371&amp;title=&amp;width=660" alt="image.png"></p> <h3 id="小结-8"><a href="#小结-8" class="header-anchor">#</a> 小结</h3> <p>一个分包可以理解就是一个文件夹。</p> <h2 id="_14-分包-预加载"><a href="#_14-分包-预加载" class="header-anchor">#</a> 14.分包—<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/preload.html" target="_blank" rel="noopener noreferrer">预加载<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></h2> <h3 id="目标-14"><a href="#目标-14" class="header-anchor">#</a> 目标</h3> <p>分包预加载--了解即可</p> <h3 id="分包预加载"><a href="#分包预加载" class="header-anchor">#</a> 分包预加载</h3> <p>在打开小程序启动的时候只下载主包代码，分包并不会下载，因此能够提升小程序启动时的打开速度，但是分包的代码只有在访问到分包的页面时才去下载，这样用户就需要有一定时间的等待（一般不太影响），通过分包预加载技术可以实现提前去下载分包的代码，这样分包页面的访问速度也会得到提升。<br>小程序通过 preloadRule 配置需要预加载的分包，在 app.json 中进行配置：</p> <ul><li>指定某个页面路径做为 key，含义是当访问这个页面时会去预加载一个分包</li> <li>network 预加载分包的网络条件，可选值为 all、wifi，默认为 wifi</li> <li>packages 指定要预下载的分包名或根路径</li></ul> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;preloadRule&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;pages/index/index&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token property">&quot;network&quot;</span><span class="token operator">:</span> <span class="token string">&quot;wifi&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;packages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;goods_pkg&quot;</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre></div><p>上述的代码代表的含义是当用户访问到 pages/index/index 时，在 wifi 网络前提下预先下载 goods_pkg 分包的代码。</p> <h3 id="小结-9"><a href="#小结-9" class="header-anchor">#</a> 小结</h3> <p>分包只能提高主包的下载速度，也就是小程序的启动速度。分包预下载可以提高分包的加载速度。</p> <h2 id="_15-框架接口-getapp"><a href="#_15-框架接口-getapp" class="header-anchor">#</a> 15.框架接口—getApp()</h2> <h3 id="目标-15"><a href="#目标-15" class="header-anchor">#</a> 目标</h3> <p>掌握getApp的使用</p> <h3 id="思考-8"><a href="#思考-8" class="header-anchor">#</a> 思考</h3> <p>小程序想实现页面之间共享数据，有哪些解决方案？</p> <h3 id="getapp"><a href="#getapp" class="header-anchor">#</a> getApp</h3> <p>框架接口指的是小程序提供的一些全局函数，如之前学习到的 App、Page、Component 函数，getApp也是小程序提供的全局函数之一。<br>getApp 是一个全局的函数，调用该函数可以获取小程序应用实例，通过小程序应用实例可实现数据或方法的共享。</p> <h3 id="参考代码-6"><a href="#参考代码-6" class="header-anchor">#</a> 参考代码</h3> <div class="language-json extra-class"><pre class="language-json"><code>App(<span class="token punctuation">{</span>
  <span class="token comment">// 读取本地存储的token数据</span>
  token<span class="token operator">:</span> wx.getStorageSync('token')<span class="token punctuation">,</span>
  onLaunch() <span class="token punctuation">{</span>
    <span class="token comment">// 生命周期</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  http(params) <span class="token punctuation">{</span>
    <span class="token comment">// 举例封装网络请求</span>
    wx.request(<span class="token punctuation">{</span>
      ...params<span class="token punctuation">,</span>
      header<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>)
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>)
</code></pre></div><p>在任意页面和组件中调用 getApp 就可以获取小程序的实例（即上述代码）</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token comment">// 获取小程序实例</span>
const app = getApp()
Page(<span class="token punctuation">{</span>
  onLoad() <span class="token punctuation">{</span>
    <span class="token comment">// 能够读取到全局实全名定义的 token 数据</span>
    console.log(app.token)

    <span class="token comment">// 调用全局实例中定义的方法</span>
    app.http(<span class="token punctuation">{</span>
      url<span class="token operator">:</span> ''<span class="token punctuation">,</span>
      method<span class="token operator">:</span> 'GET'
    <span class="token punctuation">}</span>)
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>)
</code></pre></div><h3 id="小结-10"><a href="#小结-10" class="header-anchor">#</a> 小结</h3> <p>可以通过getApp()获取全局app实例，通过在获取的app实例上添加数据或方法属性来实现共享。getApp()能实现类似web中vuex的效果，但getApp()的数据不是响应式的。</p> <h2 id="_16-框架接口-getcurrentpages"><a href="#_16-框架接口-getcurrentpages" class="header-anchor">#</a> 16.框架接口—getCurrentPages</h2> <h3 id="目标-16"><a href="#目标-16" class="header-anchor">#</a> 目标</h3> <p>掌握getCurrentPages</p> <h3 id="思考-9"><a href="#思考-9" class="header-anchor">#</a> 思考</h3> <p>从B页面返回到A页面时，希望A页面的onLoad钩子再次执行以刷新A页面，有什么解决方案？</p> <h3 id="getcurrentpages"><a href="#getcurrentpages" class="header-anchor">#</a> getCurrentPages</h3> <p>getCurrentPages 获取当前页面栈，页面栈中包含的是页面的实例，数组中第一个元素为首页，最后一个元素为当前页面。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">onUnload</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> pages <span class="token operator">=</span> <span class="token function">getCurrentPages</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>pages<span class="token punctuation">)</span><span class="token punctuation">;</span>
  pages<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><p>:::success
<strong>注意:</strong><br>不要在 App.onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。
:::</p> <h3 id="小结-11"><a href="#小结-11" class="header-anchor">#</a> 小结</h3> <p>获取到页面栈后根据数组的索引值可以获取到页面实例，通过页面实例可以获取页面中的数据或执行页面的某些逻辑</p> <h2 id="_17-框架接口-behavior"><a href="#_17-框架接口-behavior" class="header-anchor">#</a> 17.框架接口—<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html" target="_blank" rel="noopener noreferrer">Behavior<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></h2> <h3 id="目标-17"><a href="#目标-17" class="header-anchor">#</a> 目标</h3> <p>掌握Behavior的使用</p> <h3 id="behavior"><a href="#behavior" class="header-anchor">#</a> Behavior</h3> <p>类似 Vue 的 mixin 的功能，能够将一些公共的逻辑抽离到单独的模块当中。<br>每个 behavior 可以包含一组属性、数据、生命周期函数和方法。<strong>组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。</strong> 每个组件可以引用多个 behavior ，behavior 也可以引用其它 behavior</p> <h3 id="参考代码-7"><a href="#参考代码-7" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// pages/index/my-behavior.js</span>
<span class="token comment">// 注册一个 behavior</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">Behavior</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// 定义初始数据：与 Page 中定义的 data 含义一致</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">version</span><span class="token operator">:</span> <span class="token string">'v1.0.0'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 定义方法：与 Page 中定义方法含义一致</span>
  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">getVersion</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>version
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>上述代码在 data 中初始了一个数据 version，在 methods 中定义了一个方法 getVersion，接下来<strong>将这个 Behavior 对象注入到页面中</strong>，在页面中就能够调用 this.getVersion() 就可以获取 version 对应的数据了：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// pages/index/index.js</span>
<span class="token keyword">import</span> myBehavior <span class="token keyword">from</span> <span class="token string">'./my-behavior'</span>
<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// 将 myBehavior 注入到页面当中</span>
  <span class="token literal-property property">behaviors</span><span class="token operator">:</span> <span class="token punctuation">[</span>myBehavior<span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>    
    <span class="token comment">// 该方法来自于 myBehavior 当中</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getVersion</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token comment">// 可以访问到在 myBehavior 中初始的数据</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>version<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>在 Page 中通过 behaviors 来注入 Behavior 对象，这样 Behavior 中定义的数据就可以在页面中使用了。
:::success
官方文档参考：<br><a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Behavior.html" target="_blank" rel="noopener noreferrer">https://developers.weixin.qq.com/miniprogram/dev/reference/api/Behavior.html<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a><br><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html" target="_blank" rel="noopener noreferrer">https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
:::</p> <h3 id="小结-12"><a href="#小结-12" class="header-anchor">#</a> 小结</h3> <p>Behavior就是小程序的mixin。</p> <h2 id="_18-用户信息-获取用户头像"><a href="#_18-用户信息-获取用户头像" class="header-anchor">#</a> 18.用户信息—获取用户头像</h2> <h3 id="目标-18"><a href="#目标-18" class="header-anchor">#</a> 目标</h3> <p>掌握小程序中通过<code>&lt;button open-type=&quot;chooseAvatar&quot; /&gt;</code>获取用户头像方式。</p> <h3 id="核心步骤-3"><a href="#核心步骤-3" class="header-anchor">#</a> 核心步骤</h3> <ul><li>设置 button 的属性 open-type 值为 chooseAvatar</li> <li>监听 button 的 chooseavatar 事件</li></ul> <h3 id="参考代码-8"><a href="#参考代码-8" class="header-anchor">#</a> 参考代码</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">open-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>chooseAvatar<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindchooseavatar</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getAvatar<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>点击获取头像<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{avatarUrl}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>widthFix<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>image</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code> <span class="token function">getAvatar</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ev<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">avatarUrl</span><span class="token operator">:</span> ev<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>avatarUrl<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><p>:::success
<strong>注意:</strong><br>open-type 的属性值 chooseAvatar (有大写字母)，事件类型 chooseavatar (全部小写字母)。
:::</p> <h3 id="练习"><a href="#练习" class="header-anchor">#</a> 练习</h3> <p>获取用户头像，并将获取的用户头像设置到data中并在页面显示出来。</p> <h2 id="_19-用户信息-获取用户昵称"><a href="#_19-用户信息-获取用户昵称" class="header-anchor">#</a> 19.用户信息—获取用户昵称</h2> <h3 id="目标-19"><a href="#目标-19" class="header-anchor">#</a> 目标</h3> <p>掌握通过input type=&quot;nickname&quot;获取用户昵称方式。</p> <h3 id="核心步骤-4"><a href="#核心步骤-4" class="header-anchor">#</a> 核心步骤</h3> <ul><li>设置 input 的 type 属性值为 nickname</li> <li>监听事件或者使用双向绑定获取表单中的值</li></ul> <h3 id="参考代码-9"><a href="#参考代码-9" class="header-anchor">#</a> 参考代码</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">border</span><span class="token punctuation">:</span> 1px solid #ccc<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nickname<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>

需要在真实手机中操作
</code></pre></div><p>:::success
注意：<br>开发者工具中，有时触发blur事件不一定能获取到用户昵称，多点击几次即可。
:::</p> <h3 id="练习-2"><a href="#练习-2" class="header-anchor">#</a> 练习</h3> <p>获取用户昵称，并将获取的用户昵称设置到data中。</p> <h2 id="作业"><a href="#作业" class="header-anchor">#</a> 作业</h2> <ol><li>完成头像、昵称的获取并展示</li> <li>完成tab项的组件封装，</li></ol> <p>要求：</p> <ul><li>页面样式可更改组件内样式</li> <li>点击时页面要获取到当前点击项的文字</li></ul> <ol start="3"><li>完成列表项组件封装</li></ol> <p>要求：</p> <ul><li>使用插槽完成右边部分</li></ul> <ol start="4"><li>整理今天课程内容，输出xmind</li></ol> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1677392302667-3f8b59ce-8f1e-4744-be4d-147e1e98327c.png#averageHue=%2350725b&amp;clientId=u28e2f6f9-27bb-4&amp;from=paste&amp;height=483&amp;id=u40caddb1&amp;name=image.png&amp;originHeight=966&amp;originWidth=1254&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=593292&amp;status=done&amp;style=none&amp;taskId=u0d6957e6-482c-4b3e-b291-1c25e320337&amp;title=&amp;width=627" alt="image.png"></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/xcx_dx/xcx/02.html" class="prev">
        day02-小程序基础
      </a></span> <span class="next"><a href="/xcx_dx/xcx/04.html">
        day04-享+本地生活
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/xcx_dx/assets/js/app.c36966b9.js" defer></script><script src="/xcx_dx/assets/js/2.13776caa.js" defer></script><script src="/xcx_dx/assets/js/11.cead7584.js" defer></script>
  </body>
</html>
